<template>
  <div id="container"></div>
</template>
<script>
import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";

const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "vue-three",
  data() {
    return {
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: "",
      baseUrl: process.env.BASE_URL,
    };
  },
  mounted() {
    this.init();
    this.loadObj();
    this.animate();
  },

  methods: {
    //初始化three.js相关内容
    init() {
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x999999)); //环境光
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      //初始化相机
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        10
      );
      this.camera.position.set(10, 90, 65);
      this.camera.lookAt(this.scene.position);
      //初始化控制器
      this.controls = new OrbitControls(this.camera);
      this.controls.target.set(0, 0, 0);
      this.controls.minDistance = 80;
      this.controls.maxDistance = 400;
      this.controls.maxPolarAngle = Math.PI / 3;
      this.controls.update();
      //渲染
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
      }); //会在body里面生成一个canvas标签,
      this.renderer.setClearColor(0xb9d3ff,1);
      this.renderer.setPixelRatio(window.devicePixelRatio); //为了兼容高清屏幕
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      const container = document.getElementById("container");
      container.appendChild(this.renderer.domElement);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    //外部模型加载函数
    loadObj() {
      //包含材质
      new MTLLoader()
      .setTexturePath('/model/male02')
        .load("/model/models/obj/male02/male02.mtl", (materials) => {
          console.log("materials", materials);
          materials.preload();
          new OBJLoader()
            .setMaterials(materials)
            .load("/model/male02/male02.obj", (obj) => {
              obj.scale.set(30, 30, 30);
              obj.position.set(0, 0, 0);
              this.scene.add(obj);
            });
        });
    },
  },
};
</script>

<style scoped>
#container {
  width: 1200px;
  margin: 0 auto;
  height: 800px;
  overflow: hidden;
}
</style>
